import React, { Component } from "react";
import Loading from "../../assets/loading.png";
import LoadingBtn from "../../assets/loading_btn.png";
import styles from "./index.module.scss";

const FakeProgress = require("fake-progress");
const p = new FakeProgress({
  timeConstant: 10000,
  autoStart: true,
});
class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      process: 0,
    };

    this.interval = undefined;
  }

  componentDidMount() {
    p.start();
    if (this.interval) return;
    this.interval = setInterval(() => {
      this.setState({
        process: parseInt(p.progress * 100),
      });
    }, 100);
  }

  end = () => {
    p.end();
    this.interval && clearInterval(this.interval);
    this.setState({
      process: 100,
    });
    setTimeout(() => {
      this.props?.loaded();
    }, 1000);
  };

  render() {
    const { process } = this.state;
    const { showProcessType, addSpace } = this.props;
    return (
      <div className={styles.loading_box}>
        <div className={styles.loading_progress}>
          <div
            className={styles.loading_progress_pedding}
            style={{ width: `${process}%` }}
          >
            <img src={LoadingBtn} className={styles.loading_btn} alt="" />
          </div>
        </div>
        {addSpace ? <div className={styles.add_space}></div> : ""}
        {showProcessType === "text" ? (
          <img src={Loading} className={styles.loading} alt="" />
        ) : (
          ""
        )}

        {showProcessType === "number" ? (
          <div className={styles.loading_number}>{process}%</div>
        ) : (
          ""
        )}
      </div>
    );
  }
}

export default Index;
